<template>
  <div class="upload-box">
    <!--搜索-->
    <div class="search-box">
      <el-input
          v-model="keywordInput"
          placeholder="输入关键字查询文件"
          clearable
          @blur="isEmpty"
      />
      <el-button
          plain
          :icon="Search"
          @click="onSearch"
      >
        搜索
      </el-button>
      <!--<el-button-->
      <!--    plain-->
      <!--    :icon="Upload"-->
      <!--    @click="showUpLoad"-->
      <!--&gt;-->
      <!--  上传-->
      <!--</el-button>-->
    </div>

    <UpLoad
        v-if="isUploadShow"
        ref="uploadRef"
    />
  </div>

</template>

<script setup>
import UpLoad from "@/components/HomePage/UpLoad.vue";
import {Search, Upload} from '@element-plus/icons-vue'
import {ElInput, ElButton, ElMessage} from 'element-plus'
import {ref} from "vue";
import {queryfile} from "@/api";
import emitter from "@/lib/eventBus.js";

const isUploadShow = ref(true)
const keywordInput = ref('')
const uploadRef = ref()

const showUpLoad = ()=>{
  uploadRef.value.isDialogShow = true
}

//失去焦点时判断input是否为空
const isEmpty = ()=>{
  if(!keywordInput.value){
    emitter.emit('empty','false')
  }
}

const onSearch = async ()=>{
  try {
    try {
      const {data:res} = await queryfile({keyword:keywordInput.value})
      if(res.code === 200){
        emitter.emit('getQueryInfo',res.data.data)
        // console.log(res.data.data)
      } else if(res.code === 401){
        ElMessage({
          message:'没有符合条件的文件',
          type:'warning'
        })
      } else {
        ElMessage({
          message:'请输入正确关键字!',
          type:'error'
        })
      }
    } catch (e) {
      console.log(e.message)
      ElMessage({
        message:'未知错误!',
        type:'error'
      })
      // location.reload()
    }
  } catch (e) {
    console.log(e)
  }
}
</script>

<style scoped lang="less">
.upload-box{
  z-index: 999;
  position: absolute;
  top: 1%;
  left: 26%;
  height: 7%;
  width: 74%;
  background-color: transparent;
  .search-box{
    position: absolute;
    left: 65%;
    top: 0%;
    width: 33%;
    display: flex;
    .el-input{
      margin-right: 1vw;
    }
  }
}
</style>
